<template>
  <a-card
    :bordered="false"
    :body-style="{ padding: 0 }"
    style="padding-right: 30px"
  >
    <a-form
      ref="test"
      :label-col="{
        xl: { span: 1 },
        lg: { span: 1 },
        md: { span: 1 },
        sm: { span: 1 }
      }"
      :wrapper-col="{
        xl: { span: 22 },
        lg: { span: 22 },
        md: { span: 22 },
        sm: { span: 22 }
      }"
    >
      <a-row>
        <a-col
          v-for="(item, index) in firstArr"
          :key="index"
          :xl="6"
          :lg="6"
          :md="8"
          :sm="24"
          :xs="24"
        >
          <zbFormItem
            v-model:value="where[item.name]"
            :dataValue="where[item.name]"
            :itemData="item"
            @getPos="getPos"
            @getTime="getTime"
            @getUpdateTime="getUpdateTime"
          />
        </a-col>
        <a-col
          v-show="searchExpand"
          :xl="6"
          :lg="6"
          :md="8"
          :sm="24"
          :xs="24"
          v-for="(item, index) in lastArr"
          :key="index"
        >
          <zbFormItem
            v-model:value="where[item.name]"
            :dataValue="where[item.name]"
            :itemData="item"
            @getPos="getPos"
            @getTime="getTime"
            @getUpdateTime="getUpdateTime"
          />
        </a-col>
        <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
          <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
            <a-space>
              <a-button type="primary" @click="search">查询</a-button>
              <a-button @click="reset">重置</a-button>
              <a v-if="lastArr.length > 0" @click="toggleExpand">
                <span v-if="searchExpand">
                  收起 <up-outlined class="ele-text-small" />
                </span>
                <span v-else>
                  展开 <down-outlined class="ele-text-small" />
                </span>
              </a>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
  import useSearch from '@/utils/use-search';
  import zbFormItem from './zb-fotm-item2.vue';

  const emit = defineEmits(['search', 'expand-change', 'getPostion']);
  const props = defineProps({
    searchData: Array
  });
  let formData = reactive({});
  props.searchData.map((item) => {
    item.value = '';
    formData[item.name] = '';
  });

  // 默认显示的三个筛选条件
  const firstArr = props.searchData.slice(0, 4);
  // // 默认隐藏的筛选条件
  const lastArr = props.searchData.slice(4, props.searchData.length);

  // 表单数据
  const { where, resetFields } = useSearch({
    ...formData
  });
  // 搜索表单是否展开
  const searchExpand = ref(false);

  /* 搜索 */
  const search = async () => {
    //console.log(where);
    //去除where中属性值为空的属性
    let params = await deleteEmptyParams(where);
    emit('search', params);
  };

  /*  重置 */
  const reset = () => {
    resetFields();
    //解决重置后placholder不显示问题
    Object.keys(where).forEach((key) => {
      where[key] = null;
    });
    search();
  };

  /* 删除对象中值为空的属性 */
  const deleteEmptyParams = (params) => {
    const keys = Object.keys(params);
    keys.map((key) => {
      if (!params[key]) {
        delete params[key];
      }
    });
    console.log('params', params);
    return params;
  };

  /* 获取详情位置 */
  const getPos = (data) => {
    emit('getPostion', data);
    //解决联动问题
    if (data.label == 'class_code') {
      where['subclass_code'] = null;
    } else if (data.label == 'stock_code') {
      where['location_code'] = null;
    } else if (data.label == 'series_code') {
      where['series_style_code'] = null;
    }
  };
  /* 操作时间 */
  const getTime = (data) => {
    //console.log('data===', data);
    where['start_time'] = data[0];
    where['end_time'] = data[1];
  };
  /* 最后操作时间 */
  const getUpdateTime = (data) => {
    where['update_start_time'] = data[0];
    where['update_end_time'] = data[1];
  };

  /* 搜索展开/收起 */
  const toggleExpand = () => {
    searchExpand.value = !searchExpand.value;
    emit('expand-change', searchExpand.value);
  };
</script>
